﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-list.css" />
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css" />
    <style type="text/css">
        * {
            box-sizing: unset;
        }

        .btn-arrow,
        .btn-arrow:visited,
        .btn-arrow:link,
        .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }

        .logo-list li {
            padding: 8px;
        }

        .logo-list li:hover {
            background-color: #f3f3f3;
        }

        .type-list a:hover {
            color: #1299ec;
        }

        .skus {
            list-style: none;
        }

        .skus li {
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
            border: 2px solid #dd1144;
        }

        .skus img {
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

    <div id="searchApp">
        <div id="nav-bottom">
            <ly-top />
        </div>


        <!--list-content-->
        <div class="main">
            <div class="py-container">

                <div class="bread">
                    <!--面包屑-->
                    <ul class="fl sui-breadcrumb">
                        <li><span>全部结果:</span></li>
                        <!-- <li><a href="#">手机</a></li>
                        <li><span>手机通讯</span></li> -->
                        <li v-for="(c,i) in brands" :key="i"><a href="#" v-if="i<2">{{c.name}}</a>
                            <span v-else>{{c.name}}</span>
                        </li>
                    </ul>
                    <!--已选择过滤项-->
                    <ul class="tags-choose">
                        <li class="tag" v-for="(v,k) in search.filter" v-if="k !== 'cid3'" :key="k">
                            {{k === 'brandId' ? '品牌' : k}}:<span
                                style="color: red">{{getFilterValue(k,v)}}</span></span>
                            <i class="sui-icon icon-tb-close" @click="removeFilter(k)"></i>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <!--selector-->
                <div class="clearfix selector">
                    <div v-for="(f,i) in remainFilters" :key="i" class="type-wrap" v-if="f.k !== 'brandId'"
                        v-show="i<5 || show">
                        <div class="fl key">{{f.k === 'cid3' ? '分类' : f.k}}</div>
                        <div class="fl value">
                            <ul class="type-list">
                                <li v-for="(option,j) in f.options" :key="j" @click="selectFilter(f.k,option)">
                                    <a>{{f.k=='cid3'?option.name:option}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fl ext">
                            <a href="javascript:void(0);" class="sui-btn">多选</a>
                        </div>
                    </div>
                    <div class="type-wrap logo" v-else>
                        <div class="fl key brand">品牌</div>
                        <div class="value logos">
                            <ul class="logo-list">
                                <li v-for="(option,j) in f.options" :key="j" v-if="option.image"
                                    @click="selectFilter(f.k,option)">
                                    <img :src="option.image" />
                                </li>
                                <li style="text-align: center" v-else>
                                    <a style="line-height: 30px; font-size: 12px" href="#">{{option.name}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fl ext">
                            <a href="javascript:void(0);" class="sui-btn">多选</a>
                        </div>
                    </div>
                    <div class="type-wrap" style="text-align: center">
                        <v-btn small flat @click="show=true" v-show="!show">
                            更多<v-icon>arrow_drop_down</v-icon>
                        </v-btn>
                        <v-btn small="" flat @click="show=false" v-show="show">
                            收起<v-icon>arrow_drop_up</v-icon>
                        </v-btn>
                    </div>
                </div>
                <!--details-->
                <div class="details">
                    <div class="sui-navbar">
                        <div class="navbar-inner filter">
                            <ul class="sui-nav">
                                <li :class="{active:!search.sortBy}" @click="search.sortBy=''">
                                    <a href="#">综合</a>
                                </li>
                                <li>
                                    <a href="#">销量</a>
                                </li>
                                <li @click="search.sortBy='createTime'" :class="{active: search.sortBy==='createTime'}">
                                    <a href="#">新品</a>
                                </li>
                                <li>
                                    <a href="#">评价</a>
                                </li>
                                <li @click="search.sortBy='price'; search.descending = !search.descending"
                                    :class="{active: search.sortBy==='price'}">
                                    <a href="#">价格
                                        <v-icon v-show="search.descending">arrow_drop_down</v-icon>
                                        <v-icon v-show="!search.descending">arrow_drop_up</v-icon>
                                    </a>
                                </li>
                            </ul>
                            <!--顶部分页条-->
                            <div class="top-pagination">
                                <span>共 <i style="color: #222">{{total}}+</i> 商品</span>
                                <span><i style="color: red;">{{search.page}}</i>/{{totalPage}}</span>
                                <a class="btn-arrow" @click="prevPage" style="display: inline-block">&lt;</a>
                                <a class="btn-arrow" @click="nextPage" style="display: inline-block">&gt;</a>
                            </div>
                        </div>
                    </div>
                    <!--搜索结果展示 -->
                    <div class="goods-list">
                        <ul class="yui3-g">
                            <li class="yui3-u-1-5" v-for="(goods,i) in goodsList" :key="i">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <!--   点击图片后跳转地址,图片-->
                                        <a :href="'/item/'+goods.id+'.html'" target="_blank"><img
                                                :src="goods.selected.image" height="200" /></a>
                                        <!--   多sku图片列表-->
                                        <ul class="skus">
                                            <li :class="{selected: sku.id == goods.selected.id}"
                                                v-for="(sku,j) in goods.skus" :key="j" @mouseEnter="goods.selected=sku">
                                                <img :src="sku.image">
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>{{ly.formatPrice(goods.selected.price)}}</i>
                                        </strong>
                                    </div>
                                    <div class="attr">
                                        <em>{{goods.selected.title.length > 20 ? goods.selected.title.substring(0,20) +
                                    '...' : goods.selected.title}}</em>
                                    </div>
                                    <div class="cu">
                                        <em :title="goods.subTitle"><span>促</span>{{goods.subTitle.length > 15 ? goods.subTitle.substring(0,15) +
                                    '...' : goods.subTitle}}</em>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有2000人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank"
                                            class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 分页工具条-->
                    <div class="fr">
                        <div class="sui-pagination pagination-large">
                            <ul style="width: 550px">
                                <li class="{prev:true,disabled:search.page === 1}">
                                    <a @click="prevPage">«上一页</a>
                                </li>
                                <li :class="{active: search.page === index(i)}" v-for="i in Math.min(5,totalPage)"
                                    :key="i">
                                    <a @click="search.page=index(i)">{{index(i)}}</a>
                                </li>
                                <li class="dotted" v-show="search.page < totalPage"><span>...</span></li>
                                <li class="{next:true,disabled:search.page === totalPage}">
                                    <a @click="nextPage">下一页»</a>
                                </li>
                            </ul>
                            <div><span>共{{totalPage}}页&nbsp;</span><span>
                                    到第
                                    <input type="text" class="page-num" v-model="search.page">
                                    页 <button class="page-confirm" onclick="alert(1)">确定</button></span></div>
                        </div>
                    </div>
                </div>
                <!--hotsale-->
                <div class="clearfix hot-sale">
                    <h4 class="title">热卖商品</h4>
                    <div class="hot-list">
                        <ul class="yui3-g">
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/like_01.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>4088.00</i>
                                        </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/like_03.png" />
                                    </div>
                                    <div class="attr">
                                        <em>金属A面，360°翻转，APP下单省300！</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>4088.00</i>
                                        </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/like_04.png" />
                                    </div>
                                    <div class="attr">
                                        <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>4068.00</i>
                                        </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有20人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/like_02.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>4088.00</i>
                                        </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#searchApp",
            data: {
                ly,
                search: {
                    key: "", // 搜索页面的关键字
                    page: 1,
                    filter: [],//发送到后台的过滤项
                },
                goodsList: [],//搜索得到的结果  
                total: 0, // 总条数
                totalPage: 0, // 总页数 
                filters: [], // 过滤参数集合
                show: false,//是否展开更过过滤条件
            },
            components: {
                // 加载页面顶部组件
                lyTop: () => import("./js/pages/top.js")
            }, created() {
                // 判断是否有请求参数
                if (!location.search) {
                    return;
                }
                // 将请求参数转为对象
                const search = ly.parse(location.search.substring(1));
                //对page进行初始化，防止第一次访问时page为空
                search.page = search.page ? parseInt(search.page) : 1;
                //对过滤对象初始化
                search.filter = search.filter || {};
                //对排序进行初始化，默认为"",代表不排序
                search.sortBy = search.sortBy || "";
                //对排序方式初始化，转为布尔值
                search.descending = search.descending === "true" || false;
                // 保存到vue本地
                this.search = search;
                // 加载后台数据
                this.loadData();

            },
            //--监听search的变化，然后把search的过滤字段拼接在url路径后
            watch: {
                search: {
                    deep: true,
                    handler(val, old) {
                        if (!old || !old.key) {
                            // 如果旧的search值为空，或者search中的key为空，证明是第一次
                            return;
                        }
                        // 把search对象变成请求参数，拼接在url路径
                        window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(val);
                    }
                }
            }, methods: {
                loadData() {
                    // ly.http.post("/search/page", ly.stringify(this.search)).then(resp=>{
                    ly.http.post("/search/page", this.search).then(({ data }) => {

                        console.log(data);
                        //处理结果集数据
                        data.items.forEach(goods => {
                            //转换skus：把字符串转变为对象
                            goods.skus = JSON.parse(goods.skus);
                            //添加默认选中项
                            goods.selected = goods.skus[0];
                        });
                        //初始化goodList
                        this.goodsList = data.items;
                        this.total = data.total;
                        this.totalPage = data.totalPage;
                        //初始化商品分类过滤字段
                        if (data.categories.lenght === 1) {
                            //如果只有一个，那么就查询三级商品分类，展示到面包屑中
                            ly.http.get("item/category/all/level?id=" + data.categories[0].id).
                                then(resp => this.brands = resp.data);
                        }
                        //初始化分类过滤项
                        this.filters.push({
                            k: "分类",
                            options: data.categories
                        });
                        //初始化品牌过滤项
                        this.filters.push({
                            k: "品牌",
                            options: data.brands
                        });
                        //初始化其它参数
                        data.specs.forEach(spec => {
                            spec.options = spec.options.map(o => ({ name: o }));
                            this.filters.push(spec)
                        })

                    });
                },
                index(i) {
                    if (this.search.page <= 3 || this.totalPage < 5) {
                        // 当前页小于3，则页码就是从 i 开始
                        return i;
                    } else if (this.search.page <= this.totalPage - 2) {
                        // 大于3，则从page-2开始，然后逐个加1
                        return this.search.page - 3 + i;
                    } else {
                        return this.totalPage - 5 + i;
                    }
                },
                //    翻页时间的方法
                prevPage() {
                    if (this.search.page > 1) {
                        this.search.page--
                    }
                },
                nextPage() {
                    if (this.search.page < this.totalPage) {
                        this.search.page++
                    }
                },          //保存过滤项到selectFilter
                selectFilter(k, o) {
                    const obj = {};
                    Object.assign(obj, this.search);
                    if (k === 'cid3' || k === 'brandId') {
                        o = o.id;
                    }
                    obj.filter[k] = o;
                    this.search = obj;
                },
                getFilterValue(k, v) {
                    // 如果没有过滤参数，我们跳过展示
                    if (!this.filters || this.filters.length === 0) {
                        return null;
                    }
                    let filter = null;
                    // 判断是否是品牌
                    if (k === 'brandId') {
                        // 返回品牌名称
                        return this.filters.find(f => f.k === 'brandId').options[0].name;
                    }
                    return v;
                }
            }, computed: {
                remainFilters() {
                    const keys = Object.keys(this.search.filter);
                    if (this.search.filter.cid3) {
                        keys.push("cid3")
                    }
                    if (this.search.filter.brandId) {
                        keys.push("brandId")
                    }
                    return this.filters.filter(f => !keys.includes(f.k) && f.options.lenght > 1);
                }, removeFilter(k) {
                    this.search.filter[k] = null;
                }
            }

        });
    </script>
    <!-- 底部栏位 -->
    <!--页面底部，由js动态加载-->
    <div class="clearfix footer"></div>
    <script type="text/javascript">$(".footer").load("foot.html");</script>
    <!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>